<template>
  <div class="comments-wrapper">
    <div class="comment-header">
      <span>评论 &nbsp; ({{ commentsLength || "0" }})</span>
    </div>
    <div class="commentsList" v-if="commentsLength">
      <van-list>
        <van-cell v-for="item in preComments" :key="item._id">
          <template #title>
            <LeaverInfo :leaver="item.leaver" />
          </template>
          <div class="wrods-wrapper">
            {{ item.words }}
          </div>
          <div class="time">
            {{ item.time }}
          </div>
        </van-cell>
      </van-list>
    </div>
    <van-empty v-else image-size="0" description="还没有人评论嗷" />
  </div>
</template>
<script>
import { reactive, toRefs } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";
import LeaverInfo from "./LeaverInfo.vue";
export default {
  components: { LeaverInfo },
  props: ["comments"],
  setup(props) {
    const state = reactive({
      preComments: [],
      commentsLength: 0,
    });

    onMounted(() => {
      if (props.comments.length <= 3) {
        state.preComments = props.comments.slice(0, props.comments.length);
      } else {
        state.preComments = props.comments.slice(0, 3);
      }
      state.commentsLength = state.preComments.length;
    });
    return { ...toRefs(state) };
  },
};
</script>
<style lang="less" scoped>
.comments-wrapper {
  .comment-header {
    font-weight: 700;
    font-size: 19px;
    padding: 5px 15px;
  }
  .commentsList {
    width: 95%;
    margin: 0 auto;
    border-radius: 5px;
    .wrods-wrapper {
      font-size: 14px;
    }
    .time {
      font-size: 10px;
    }
  }
}
</style>
